<template>
  <Button @click="visiable = true" type="primary">Create</Button>
  <Scroll :on-reach-bottom="handleReachBottom">
    <Card dis-hover v-for="(item, index) in squareList" :key="index" style="margin: 32px 0"
          @click.native="enterDetail(item.squareId)">
      <Row>
        <Col>
          <Card :bordered="false">
            <template #title>
              <Row>
                <Col>
                  <Avatar>USER</Avatar>
                </Col>
                <Col>
                  {{ item.userName }}
                </Col>
              </Row>
            </template>
            <p>{{ item.content }}</p>
            <Row>
              <Col>
                {{ item.squareDate }}
              </Col>
              <Col>
                点赞数:{{ item.starNum }}
              </Col>
              <Col>
                评论数:{{ item.commentNum }}
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </Card>
  </Scroll>
  <Drawer
      title="Create"
      v-model="visiable"
      width="720"
      :mask-closable="true"
  >
    <div class="demo-drawer-footer">
      <Input v-model="content" type="textarea" :rows="4" placeholder="敲出美好生活"/>
      <Button type="primary" @click="postSquare">完成</Button>
    </div>
  </Drawer>
</template>
<script>

import axios from 'axios'

export default {
  data() {
    return {
      value: false,
      squareList: [],
      visiable: false,
      content: 'test'
    }
  },
  created() {
    console.log('ss')
    const self = this
    axios({
      method: 'get',
      url: '/square'
    }).then((result) => {
      console.log(result)
      for (let i = 1; i < result.data.length; i += 1) {
        self.squareList.push(result.data[i])
      }
    })
  },
  methods: {
    handleReachBottom() {
      return new Promise((resolve) => {
        console.log('yes')
        setTimeout(() => {
          const self = this
          axios({
            method: 'get',
            url: '/square'
          }).then((result) => {
            console.log(result)
            for (let i = 1; i < result.data.length; i += 1) {
              self.squareList.push(result.data[i])
            }
          })
          resolve()
        }, 1000)
      })
    },
    enterDetail(squareId) {
      console.log(squareId)
      this.$router.push({ name: 'SquareDetail', params: { squareId } })
    },
    postSquare() {
      console.log(this.content)
      axios({
        method: 'post',
        url: '/square',
        data: {
          content: this.content,
        }
      }).then((result) => {
        console.log(result)
      })
      this.visiable = false
      this.content = ''
    }
  }
}
</script>
